//厦门大学计算机专业 | 前华为工程师
//专注《零基础学编程系列》 http://lblbc.cn/blog
//包含：Java | 安卓 | 前端 | Flutter | iOS | 小程序 | 鸿蒙
//公众号：蓝不蓝编程
<template>
	<view class="page-wrapper">
		<view class="img-container">
			<image class="goods-img" :src="picUrl"></image>
		</view>
		<view class="goods-info">
			<view class="goods-price">{{ price }}</view>
			<view class="coupon-row">
				<view class="coupon-sub-row">
					<view class="coupon-text">券 ￥5</view>
				</view>
				<view class="coupon-btn">领券 ></view>
			</view>
			<view class="goods-seller">蓝不蓝自营</view>
			<view class="goods-name">{{ name }}</view>
			<view class="tags-row">
				<image class="tag-img" src="/static/images/secure.png"></image>
				<view class="tag-text1">100%正品</view>
				<image class="tag-img" src="/static/images/good.png"></image>
				<view class="tag-text2">满88免邮</view>
				<image class="tag-img" src="/static/images/good.png"></image>
				<view class="tag-text2">7天可退</view>
				<image class="tag-img" src="/static/images/good.png"></image>
				<view class="tag-text2">上门退货</view>
			</view>
		</view>
		<image class="goods-desc-img" :src="descPicUrl" mode="widthFix"></image>
		<view class="bottom-wrapper">
			<view class="bottom-split"></view>
			<view class="bottom-btns">
				<view class="add-to-cart" @tap="addToCart" :data-id="id">
					<view class="cart-text">购物车</view>
					<image class="cart-img" src="/static/images/cart.png"></image>
				</view>
				<view class="buy-btn" @tap="buyNow" :data-id="id">购买</view>
			</view>
		</view>
	</view>
</template>

<script>
import { queryGoods, addToCart } from '@/common/api'
export default {
	data() {
		return {
			id: '',
			name: '',
			picUrl: '',
			descPicUrl: '',
			price: 0
		};
	},
	onLoad: function(option) {
		this.queryData(option.id);
	},
	methods: {
		queryData(goodsId) {
			queryGoods(goodsId).then(resp => {
				if (!resp.data.code) {
					this.id = resp.data.data.id
					this.name = resp.data.data.name
					this.picUrl = resp.data.data.squarePic
					this.descPicUrl = resp.data.data.descPic.split(',')[0]
					this.price = '￥' +resp.data.data.price / 100	
				}
			})
		},

		addToCart(e) {
			let goodsId = e.currentTarget.dataset['id'];
			var params = { goodsId: goodsId };
			var token = uni.getStorageSync('token')
			if(!token){
				uni.navigateTo({
				    url: '/pages/login/login'
				});
			}else{
				addToCart(params).then(resp => {
					if (!resp.data.code) {
						uni.showToast({
							title: '已加入购物车'
						});
					}
				})
			}
		},

		buyNow(e) {
			let goodsId = e.currentTarget.dataset['id'];
			var token = uni.getStorageSync('token')
			if(!token){
				uni.navigateTo({
				    url: '/pages/login/login'
				});
			}else{
				uni.navigateTo({
				    url: '/pages/order/order-confirm/order-confirm?goodsId=' + goodsId
				});
			}
		}
	}
};
</script>
<style>
	.page-wrapper {
		margin: 0;
		font-size: 28rpx;
		line-height: 1.5;
		color: #333;
		background-color: #f4f4f4;
		overflow-x: hidden;
		-webkit-overflow-scrolling: touch;
		-webkit-tap-highlight-color: transparent;
		min-height: 2000rpx;
	}

	.img-container {
		display: flex;
		justify-content: center;
		margin-left: 20rpx;
		margin-right: 20rpx;
		margin-top: 20rpx;
		border-radius: 10rpx;
		background-color: white;
	}

	.goods-img {
		width: 400rpx;
		height: 400rpx;
	}

	.goods-desc-img {
		display: flex;
		width: 100%;
	}

	.goods-info {
		border-radius: 10rpx;
		background-color: white;
		margin-left: 20rpx;
		margin-right: 20rpx;
		margin-top: 20rpx;
	}

	.goods-price {
		padding-top: 20rpx;
		padding-left: 20rpx;
		color: #ef3965;
	}

	.coupon-row {
		margin-left: 20rpx;
		display: flex;
		flex-direction: row;
		margin-top: 20rpx;
		align-items: center;
		/*子控件垂直居中*/
	}

	.coupon-sub-row {
		flex: 1;
	}

	.coupon-text {
		width: fit-content;
		border: 1rpx solid #ef3965;
		border-radius: 10rpx;
		padding: 10rpx;
		color: #ef3965;
	}

	.coupon-btn {
		background-color: #ef3965;
		color: white;
		padding: 5rpx 20rpx;
		border-top-left-radius: 1rem;
		border-bottom-left-radius: 1rem;
	}

	.goods-seller {
		margin-left: 20rpx;
		margin-top: 20rpx;
		background-color: #ef3965;
		color: white;
		padding: 5rpx 20rpx;
		width: fit-content;
		border-radius: 10rpx;
	}

	.goods-name {
		font-size: 35rpx;
		margin-left: 20rpx;
		margin-top: 20rpx;
		padding-bottom: 20rpx;
	}

	.bottom-wrapper {
		position: fixed;
		bottom: 0;
		width: 100%;
		display: flex;
		flex-direction: column;
		padding-bottom: 10rpx;
		background-color: white;
	}

	.bottom-split {
		background-color: #dfdfdf;
		height: 2rpx;
		margin-bottom: 20rpx;
	}

	.bottom-btns {
		width: 100%;
		display: flex;
		flex-direction: row;
		margin-bottom: 20rpx;
		align-items: center;
	}

	.add-to-cart {
		display: flex;
		flex-direction: row;
		flex: 1;
		margin-left: 100rpx;
	}

	.cart-text {
		font-size: 35rpx;
		color: #737373;
	}

	.cart-img {
		width: 50rpx;
		height: 50rpx;
	}

	.buy-btn {
		flex: 1;
		font-size: 35rpx;
		color: #fff;
		background-color: #ef3965;
		border-radius: 2rem;
		padding: 20rpx;
		display: flex;
		justify-content: center;
		margin-right: 100rpx;
	}

	.tags-row {
		display: flex;
		flex-direction: row;
		padding-top: 20rpx;
		padding-bottom: 20rpx;
		background-color: #fafafa;
		align-items: center;
	}

	.tag-img {
		margin-left: 10rpx;
		width: 30rpx;
		height: 30rpx;
	}

	.tag-text1 {
		color: #222222;
		font-size: 30rpm;
	}

	.tag-text2 {
		color: #595d63;
		font-size: 30rpm;
	}
</style>
